<template>
	<tui-bottom-popup class="border-t" :show="popupShow" bgcolor="transparent">
		<view class="title">
			<text class="close" @tap="closeFun">取消</text>
			<text class="titleWord">请选择级别</text>
			<text class="makesure" @tap="save">确定</text>
			<!-- <i class="closeClass iconfont iconguanbi3" @tap="closeFun"/> -->
		</view>
		<view class="tab">
			<block v-for="(name,index) in lvlTitleNameList" :key="name">
			<!-- <template v-for="(name,index) in lvlTitleNameList" :key="name"> -->
				<view v-if="index>currentRoleIndex" class="tabItem"  @tap="changeTab(index)" :class="tabIndex===index?'active':''">
					<text >{{name}}</text> 
				</view> 
			<!-- </template> -->
			</block>
		</view>
		<view class="tui-popup-box" >
			<scroll-view scroll-y="true" style="height: 100%;" >
				<block v-for="(item,dataIndex) in dataList" :key="item.id" >
					<view  class="flex-row flex-m-between u-margin-20" :class="item.id===form[lvlIdList[tabIndex]]?'selectedItem':'unselectedItem'" @tap="selectItem(item,dataIndex)">
						<text class="">{{item.name}}</text>
						<image v-if="item.id===form[lvlIdList[tabIndex]]" class="img-40" src="../../static/img/success.png" mode="aspectFit"></image>
					</view>
				</block>
			</scroll-view>
		</view>
	</tui-bottom-popup>
</template>

<script>
	import tuiBottomPopup from "@/components/bottom-popup/bottom-popup"
	export default {
		props: {
			popupShow: {
				type: Boolean,
				default: false,
			},
			autoClose: {
				type: Boolean,
				default: true,
			},
			autoRefresh: {
				type: Boolean,
				default: true,
			},

		},
		components: {
			tuiBottomPopup,
		},
		data() {
			return {
				tabIndex:0,
				form:{
					jxsId:'', //	经销商编码
					jlId:'', //	经理编码
					bbzId:'', //	本部长编码
					lsId:'', //	理事编码
				},

				dataList:[],
				lvlIdList:['lsId','bbzId','jlId','jxsId'],
				lvlNameList:['','','',''],
				lvlTitleList:['lsList','bbzList','jlList','jxsList'],
				lvlTitleNameList:['理事','本部长','经理','经销商'],
				roleList :['ls','bbz','jl','jxs'],
				currentRoleIndex:0
			}
		},
		mounted() {
			const role =  uni.getStorageSync('orgLv')
			// console.log("^^^^^^^^^^^^^role",role);
			const roleIndex = this.roleList.indexOf(role)
			this.currentRoleIndex = roleIndex 
			this.tabIndex=roleIndex+1
			// console.log("^^^^^^^^^^^^^role",role,this.currentRoleIndex,this.tabIndex);
			this.loadData()
		},
		methods: {
			save(){
				let list = this.lvlNameList.slice(this.currentRoleIndex+1)
				this.$emit("search",list.join('/'),this.form)
				this.$emit('colosePopup');
			},
			selectItem(item,index){
				this.$set(this.form,this.lvlIdList[this.tabIndex],item.id)
				this.lvlNameList[this.tabIndex] = item.name
				console.log("this.lvlNameList.join('/') ",this.lvlNameList,this.lvlNameList.join('/'),this.currentRoleIndex)
				
				
				let list = this.lvlNameList.slice(this.currentRoleIndex+1,this.tabIndex+1)
				this.$emit("change",list.join('/'),this.form)
				
				for (var i = this.tabIndex+1 ; i < this.lvlIdList.length; i++) {
					this.form[this.lvlIdList[i]] = ''
				}
				
				
				// let lvlIdList = this.lvlIdList.slice(this.currentRoleIndex+1,this.tabIndex+1)
				// this.lvlIdList.forEach((item,index)=>{
				// 	lvlIdList.forEach(item2=>{
				// 		if(item==item2){
				// 			this.form[item] = ''
				// 		}
						
				// 	})
					
				// })
				// if(this.autoRefresh){
					// this.$emit("change",list.join('/'),this.form)
				// }else if(this.tabIndex+1===this.lvlIdList.length){
				// 	this.$emit("change",list.join('/'),this.form)
				// }
				// if(this.autoClose){
				// 	this.$emit("colosePopup")
				// }
				
			},
			changeTab(index,id){
				this.tabIndex=index
				// this.form[this.lvlIdList[index]] = id
				this.loadData()
			},
			closeFun(){
				// 谁起的名 算了不改名字了
				this.$emit('colosePopup');
			},
			loadData(){
				this.dataList = []
				let orgLv=uni.getStorageSync('storeOrgLv')
				let params = this.form
				params.orgLv=orgLv
				this.$http.getChartOption(params).then(res=>{
					if(res.status===0){
						let data = res.data
						this.dataList = data[this.lvlTitleList[this.tabIndex]]
					}
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	 @import "../../common/statistics.scss";
	 .border-t{
		 view{
			background-color: #fff;  
		 }
	 }
	 .selectedItem{
		 height: 40rpx;
		font-size: 28rpx;
		 color: #EA655E;
		 img{
			 visibility: true;
		 }
	 }
	 .unselectedItem{
		 height: 40rpx;
		 font-size: 28rpx;
		 color: #323233;
		 img{
			 visibility: false;
		 }
	 }
	.title{
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
		    display: flex;
		    justify-content: space-between;
		    padding: 20rpx;
			.closeClass{
				color: #C8C9CC;
			}
			.titleWord{
				font-size: 32rpx;
				font-weight: 500;
				color: #111111;
			}
			.close{
				font-size: 28rpx;
				color: #969799;
			}
			.makesure{
				font-size: 28rpx;
				color: #EA655E;
			}
	}
	.tab{
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		color: #969799;
		
		.tabItem{
			margin-right: 20rpx;
		}
	}
	// picker-view {
	//     width: 100%;
	//     height: 600upx;
	//     // margin-top:20upx;
	// }
	
	.item {
	    line-height: 100upx;
	    text-align: center;
	}
	.active{
		font-size:28rpx;
		color: #323233;
		font-weight: bold;
		padding-bottom: 5rpx;
		border-bottom: 4rpx solid #EA655E;
	}
	/*底部选择弹层*/
	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 10rpx 0 10rpx 0;
		// min-height: 400rpx;
		height: 400rpx;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}



	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding: 30rpx;
		padding-top: 0;
		position: relative;
	}

	.close-icon {
		position: absolute;
		top: 0;
		right: 30rpx;
		color: #333;
		font-size: 36rpx;
	}
	
	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		color: $red;
		font-size: 36rpx;
		.tui-symbol {
			font-size: 26rpx;
		}
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #727272;
	}
	
	.sku-numbox {
		input {
			background-color: #f7f7f7 !important;
		}
	}
	
	.tui-select-info {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 16rpx;
		color: #333;
	}

	.tui-popup-scroll {
		height: 600rpx;
		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		// border: 2rpx solid $borderColor;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tui-attr-active {
		font-weight: bold;
		position: relative;
		&:after {
			content: "";
			position: absolute;
			// border: 1rpx solid $red;
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
			left: 0;
			top: 0;
		}
	}
	
	.noactived {
		position: relative;
		background-color: #f7f7f7;
		border-color: #f7f7f7;
		pointer-events: none;
		color: #c2c2c2;
		text-decoration: line-through;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}

	.tui-operation {
		width: 100%;
		height: 100rpx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);

		&:before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			border-top: 1rpx solid #eaeef1;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}

		.tui-btn-danger {
			// background-color: #ff5000e6 !important;
			border-radius: 50rpx !important;
		}

		.tui-btn-warning {
			border-radius: 50rpx !important;
			margin-right: 16rpx;
			// background-image: linear-gradient(to right, #f9bc4f, #f77522) !important;
		}
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
	}
</style>
